// 让便签可被拖动，但不能超出视口

var moveBar = document.querySelector(".move-bar")
var note = document.querySelector(".note")


//监听moveBar的移动
moveBar.onmousedown = function (e) {
    //获取视图宽高，元素的宽高
    var w = document.documentElement.clientWidth
    var h = document.documentElement.clientHeight

    var ew = note.offsetWidth
    var eh = note.offsetHeight

    var maxleft = w - ew
    var maxtop = h - eh


    console.log(e.clientX, e.clientY);
    console.log(maxleft, maxtop);

    var x = e.clientX
    var y = e.clientY
    //获取元素距离视口的距离
    var rect = moveBar.getBoundingClientRect()
    var eX = rect.left
    var eY = rect.top


    //鼠标按下之后，监听windows的移动事件
    window.onmousemove = function (e) {
        //鼠标移动的距离
        var disX = e.clientX - x
        var disY = e.clientY - y

        var left = eX + disX
        var top = eY + disY

        //left和top值的有效范围控制
        if (left < 0) { left = 0 }
        if (left > maxleft) { left = maxleft }

        if (top < 0) { top = 0 }
        if (top > maxtop) { top = maxtop }


        note.style.left = left + 'px'
        note.style.top = top + 'px'

    }


    //鼠标抬起后，不在监听 移动和抬起
    window.onmouseup = function () {
        window.onmousemove = null
        window.onmouseup = null
    }


}